<template>
  <div>
    <el-button @click="addComponent">添加组件</el-button>
    <el-button @click="getComponent">获取当前配置</el-button>
    <grid-layout
        :layout.sync="layout"
        :col-num="12"
        :row-height="30"
        :is-draggable="true"
        :is-resizable="true"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
    >
      <div  v-for="item in layout" :key="item.i" >
          <ComItem :config="item" />
      </div>
    </grid-layout>

  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout';
import {createdUUID} from '@/utlis'
import ComItem from './components/index'
export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    ComItem
  },
  name: 'DragCreate',
  data() {
    return {
      drawer: false,
      layout: [
        {"x":0,"y":0,"w":6,"h":4,"i":"0"},
        {"x":6,"y":0,"w":6,"h":4,"i":"1"},
      ]
    }
  },
  methods: {
    addComponent() {
      this.layout.push({
        x: 0,
        y: 6,
        w: 6,
        h: 6,
        i: createdUUID(),
        component: 'card',
        attribute: [],
        mapsKey: [],
      })
    },
    getComponent(){
      console.log(this.layout)
    },
  },
}
</script>

<style scoped>

</style>
